<script lang="ts" setup>
import { Tabbar, TabbarItem } from 'vant'

const route = useRoute()
const navList = [
  { title: '主页', path: '/', icon: 'home-o' },
  { title: '设置', path: '/config', icon: 'setting-o' },
]
const active = ref(navList.findIndex(x => x.path === route.fullPath))
</script>

<template>
  <div>
    <RouterView />
    <Tabbar v-model="active">
      <TabbarItem
        v-for="item in navList"
        :key="item.path"
        :icon="item.icon"
        @click="$router.push(item.path)"
      >
        {{ item.title }}
      </TabbarItem>
    </Tabbar>
  </div>
</template>
